<template>
  <div v-if="state.isInit" class="s-dialog" :class="state.className">
    <s-popup
      width="80%"
      :border-radius="10"
      :background="state.background"
      :position="state.position"
      :effect="state.effect"
      :effect-duration="state.effectDuration"
      :mask="state.mask"
      :mask-opacity="state.maskOpacity"
      :mask-close="state.maskClose"
      :z-index="state.zIndex"
      :value="state.visible"
    >
      <div class="s-dialog-content">
        <div v-if="state.title !== ''" class="s-dialog-header" :style="{ color: $sTheme(state.titleColor) }">
          {{ state.title }}
        </div>
        <div
          v-if="state.message !== '' || state.content !== ''"
          class="s-dialog-message"
          :style="{ color: $sTheme(state.messageColor) }"
        >
          {{ state.message || state.content }}
        </div>
        <div
          v-if="(state.showCancel && state.cancelText !== '') || state.confirmText !== ''"
          class="s-hairline--top s-dialog-footer"
        >
          <button
            v-if="state.showCancel && state.cancelText !== ''"
            class="s-hairline--right"
            :class="state.cancelClass"
            :style="{ color: $sTheme(state.cancelColor) }"
            @click="state.onCancel"
          >
            {{ state.cancelText }}
          </button>
          <button
            v-if="state.confirmText !== ''"
            :class="state.confirmClass"
            :style="{ color: $sTheme(state.confirmColor) }"
            @click="state.onConfirm"
          >
            {{ state.confirmText }}
          </button>
        </div>
      </div>
    </s-popup>
  </div>
</template>

<script>
import SPopup from '../s-popup/s-popup';
import Dialog from './dialog';

/**
 * s-dialog 模态确认弹框
 * @description 用于提示或二次确认，使用需通过 import Dialog from '@/uni_modules/s-ui/utils/dialog'
 * @example Dialog({message:'确定删除吗？'}).then(()=>{},()=>{})
 */
export default {
  name: 'SDialog',
  components: {
    SPopup,
  },
  data() {
    return {
      state: Dialog.state,
    };
  },
};
</script>

<style lang="scss" scoped>
.s-dialog {
  .s-dialog-header {
    padding-top: 40rpx;
    font-size: 32rpx;
    text-align: center;
    font-weight: bold;
  }

  .s-dialog-message {
    max-height: 60vh;
    padding: 50rpx 32rpx;
    overflow-y: auto;
    font-size: 28rpx;
    line-height: 1.5;
    white-space: pre-wrap;
    text-align: center;
    word-wrap: break-word;
  }

  .s-dialog-footer {
    display: flex;
    .s-dialog-btn-wrap {
      flex: 1;
    }
    .s-btn {
      width: 100%;
      height: 100rpx;
      font-size: 30rpx;
      font-weight: bold;
    }
  }
}
</style>
